.hole-div {
    width: 100%;
    height: 100%;
}

.top {
    width: 100%;
    height: 16vw;
    background-color: rgb(0, 151, 255);
    display: flex;
    flex-direction: column;
}


/* 顶部的地区部分 */

.top-address {
    width: 100%;
    height: 3vw;
    display: flex;
    align-items: center;
    font-weight: 900;
    color: white;
    font-size: 3.5vw;
    margin-top: 2vw;
    margin-bottom: 1vw;
    user-select: none;
}

.fa-map-marker {
    width: 2vw;
    height: 2vw;
    display: flex;
    align-items: center;
    margin: 1vw;
    margin-left: 1.5vw;
    color: white;
}

.fa-caret-down {
    width: 3vw;
    height: 3vw;
    margin-left: 1vw;
    color: white;
}


/* 顶部搜索框部分 */

.top-search {
    width: 100%;
    height: 7vw;
}

.search-div {
    width: 90%;
    height: 7vw;
    background-color: rgb(255, 255, 255);
    font-size: 3vw;
    color: gray;
    margin: 1.5vw 5%;
    border-radius: 3px;
    text-align: center;
    line-height: 7vw;
    user-select: none;
}


/* 中部 */

.mid {
    width: 100%;
    height: auto;
}


/* 中部列表部分 */

.mid-list-ul {
    width: 100%;
    height: 45vw;
    display: flex;
    justify-content: space-around;
    align-content: center;
    flex-wrap: wrap;
}

.mid-list-ul li {
    width: 18vw;
    height: 20vw;
    display: flex;
    flex-direction: column;
    justify-items: center;
    align-items: center;
}

.mid-list-ul li img {
    width: 12vw;
    height: 12vw;
}

.mid-list-ul p {
    font-size: 3vw;
    color: gray;
    text-align: center;
    user-select: none;
    cursor: pointer;
}


/* 中部品质套餐 */

.mid-setmenu {
    width: 95%;
    height: 30vw;
    display: flex;
    background-color: rgb(246, 246, 246);
    margin: 0 auto;
    border-radius: 2px
}

.mid-setmenu-text {
    margin: 3vw 5vw;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.mid-setmenu-text .p0 {
    font-size: 4vw;
    margin-bottom: 1vw;
    font-weight: bolder;
    font-family: Monospace;
}

.mid-setmenu-text .p1 {
    padding: 0;
    margin: 0;
    color: grey;
    margin-bottom: 3vw;
    font-size: 3vw;
    font-weight: bolder;
    font-family: Monospace;
    width: 100%;
}

.mid-setmenu-text .p2 {
    color: rgb(203, 156, 123);
    font-weight: bolder;
    font-size: 3vw;
    font-family: Monospace;
}

.mid-setmenu img {
    width: 28vw;
    height: 28vw;
    margin: 1% 10%;
}


/* 中部 vip */

.mid-vip {
    display: flex;
    justify-content: space-between;
    width: 95%;
    margin: 0 auto;
    height: 15vw;
    align-items: center;
    background-color: rgb(254, 237, 193);
    margin-top: 1.5vw;
    border-radius: 2px;
}

.mid-vip-text {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    user-select: none;
}

.mid-vip-text .t1 {
    width: 55%;
    font-weight: bolder;
    font-size: 4vw;
}

.mid-vip-text .t2 {
    width: 10%;
}

.mid-vip-text .t3 {
    font-size: 3vw;
}

.mid-vip img {
    width: auto;
    height: 5vw;
    margin: 2vw;
}

.mid-vip-open {
    width: 30%;
    user-select: none;
    font-size: 3vw;
    cursor: pointer;
}


/* 中部推荐商家 */

.mid-show {
    width: 95%;
    height: 10vw;
    margin: 0 auto;
    margin-top: 1.5vw;
    display: flex;
    justify-content: center;
    align-items: center;
}

.mid-show-line {
    width: 10vw;
    height: 0.3vw;
    background-color: rgb(136, 136, 136);
}

.mid-show-text {
    width: 25%;
    text-align: center;
    font-size: 4vw;
    font-weight: bolder;
}


/* 中部选项 */

.mid-select {
    width: 95%;
    margin: 0 auto;
    display: flex;
    height: 8vw;
    justify-content: space-between;
    align-content: center;
}

.mid-select-s1 {
    display: flex;
    align-items: center;
    justify-items: center;
    text-align: center;
    margin: auto;
    background-color: rgb(202, 78, 78);
}

.mid-select-s1 i {
    width: auto;
    margin: auto 0;
}

.mid-select-s2 {
    align-items: center;
    justify-items: center;
    text-align: center;
    margin: auto;
    background-color: rgb(51, 163, 41);
}

.mid-select-s3 {
    align-items: center;
    justify-items: center;
    text-align: center;
    margin: auto;
    background-color: rgb(62, 136, 211);
}

.mid-select-s4 {
    display: flex;
    justify-items: center;
    align-items: center;
    margin: auto;
    text-align: center;
    background-color: rgb(219, 121, 17);
}

.mid-select-s4 i {
    width: auto;
    margin: auto 0;
}


/* 底部 */

.bottom {
    width: 100%;
    height: 35vw;
    display: flex;
    flex-direction: column;
    background-color: rgb(183, 218, 228);
}

.bottom-info {
    display: flex;
    width: 95%;
    height: 30vw;
    margin: 0 auto;
    align-content: center;
    box-sizing: border-box;
    padding: 2vw 0;
}

.info-img {
    flex: 0 0 25%;
}

.info-img img {
    width: 20vw;
    height: 20vw;
    text-align: center;
}


/* 第一行 */

.text-t1 {
    display: flex;
    justify-content: space-between;
    align-content: center;
}

.t1-front {
    flex: 0 0 70%;
    font-size: 4vw;
    font-weight: bolder;
}

.t1-icon-bgd {
    background-color: rgb(106, 107, 105);
    width: 2vw;
    height: 4vw;
    margin: auto 3vw;
}

.t1-icon-point {
    background-color: #fff;
    width: 1.5vw;
    height: 1.5vw;
    border-radius: 100%;
    margin: 0.35vw;
    margin-top: 0.8vw;
}


/* 第二行 */

.text-t2 {
    display: flex;
    justify-content: space-between;
    align-content: center;
    margin-top: 1vw;
}

.t2-front {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.t2-front i {
    width: 6vw;
    color: rgb(232, 204, 54);
}

.p1 {
    width: 5vw;
    margin: 0 1vw;
    font-size: 1.5vw;
}

.p2 {
    font-size: 1.5vw;
}

.t2-shopicon {
    display: flex;
    flex: 0 0 22%;
    background-color: rgb(2, 152, 235);
    text-align: center;
    color: white;
    font-size: 2.8vw;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}


/* t3 */

.text-t3 {
    display: flex;
    margin-top: 1.5vw;
    justify-content: space-between;
    align-content: center;
}

.t3-front {
    display: flex;
    align-items: center;
    font-size: 2.8vw;
    align-items: center;
}

.t3-back {
    display: flex;
    font-size: 3vw;
    flex: 0 0 35%;
    font-size: 2.8vw;
    align-items: center;
    justify-content: flex-end;
    margin-top: 2vw;
}


/* t4 */

.text-t4 {
    border: 0.1vw solid gray;
    width: 12vw;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.8vw;
}


/* t5 */

.text-t5 {
    display: flex;
    margin-top: 1.5vw;
    height: auto;
}

.t5-front {
    display: flex;
    font-size: 3vw;
    align-content: center;
}

.t5-front p {
    display: flex;
    align-items: center;
}

.t5-front .front-img {
    width: 5vw;
    background-color: rgb(108, 183, 51);
    margin: auto;
    text-align: center;
    color: #fff;
    font-weight: bold;
    font-size: 3.2vw;
    border-radius: 2px;
    margin-right: 1.5vw;
}

.t5-back {
    flex: 0 0 25%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    font-size: 3vw;
}

.t5-back i {
    display: flex;
    align-items: center;
    color: gray;
}


/* t6 */

.t6-text {
    margin-top: 1vw;
    height: auto;
}

.t6-front {
    display: flex;
    font-size: 3vw;
    align-content: center;
}

.t6-front .front-img {
    width: 5vw;
    background-color: rgb(230, 95, 17);
    text-align: center;
    color: #fff;
    font-weight: bold;
    font-size: 3.2vw;
    border-radius: 2px;
    margin-right: 1.5vw;
}

.t6-front p {
    display: flex;
    align-items: center;
}


/* 底部导航栏 */

.bnav {
    display: flex;
    width: 100%;
    height: 15vw;
    align-content: center;
    justify-content: space-around;
    position: fixed;
    bottom: 0;
    background-color: #fff;
    border: 0.5vw solid rgb(240, 238, 238);
}

.bnav li {
    margin: 1vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.bnav li img {
    width: 5vw;
    height: auto;
    color: rgb(155, 149, 149);
}

.bnav li p {
    text-align: center;
    font-size: 2vw;
    color: rgb(155, 149, 149);
}